<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fnx" uri="http://java.sun.com/jsp/jstl/functionsx" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="/WEB-INF/views/head.jsp"/>
    <style>
        .clearFix:before, .clearFix:after {
            content: "";
            display: table;
        }

        .clearFix:after {
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        @media (min-width: 1200px) {
            .col-lg-5ths {
                width: 20%;
                float: left;
            }
        }

        @media (max-width: 768px) {
            div.wrapper img {
                height: 280px;
            }
        }

        main.container {
            /*border-top: 3px solid #3c8dbc;*/
            padding-top: 3px;
            border-radius: 3px;
            background: #fff;
            margin-top: 10px;
        }

        .header .btn-wrap {
            float: left;
            padding: 10px 0;
        }

        .header .search {
            float: left;
            margin-top: 10px;
        }

        .header button {
            margin-left: 10px;
            /*padding: 5px 20px;*/
        }

        .header button:first-child {
            margin-left: 0;
        }

        main .content {
            padding: 10px 0;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul.ul-row {
            width: calc(100% + 10px);
            padding-left: 0;
            margin: 0;
            margin-left: -5px;
        }

        .ul-row li {
            padding: 0 5px;
        }

        .row .wrapper {
            width: 100%;
            height: 100%;
            background: #fff;
            margin: 0;
            margin-bottom: 40px;
            border-radius: 3px;
            position: relative;
            text-align: center;
            -webkit-transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
            box-shadow: 0 1px 4px 2px rgba(200, 200, 200, 0.7);
        }

        .row .wrapper:hover {
            box-shadow: 0 2px 9px 4px rgba(200, 200, 200, 0.7);
            -webkit-transform: translate3d(0, -2px, 0);
            -moz-transform: translate3d(0, -2px, 0);
            -ms-transform: translate3d(0, -2px, 0);
            -o-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
        }

        .wrapper .li-center {
            height: 165px;
            padding: 15px;
            background-clip: content-box;
        }

        .wrapper > .li-bottom {
            height: 45px;
            box-shadow: 0 -1px 4px 1px rgba(50, 50, 50, 0.2);
        }

        .wrapper img {
            height: 100%;
            width: 100%;
        }

        input[type="checkbox"], [type="checkbox"] + label {
            width: 14px;
            height: 14px;
            margin-top: 0px;
            background: transparent;
            opacity: 0;
        }

        .wrapper input, .wrapper label {
            position: absolute;
            bottom: 16px;
            left: 15px;
            margin: 0;
        }

        .wrapper label {
            opacity: 1;
            border: 1px solid #999;
        }

        .wrapper h3 {
            color: #666;
            text-align: left;
            width: 100%;
            height: 30px;
            line-height: 45px;
            font-weight: 600;
            padding: 0 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            margin: 0;
        }

        .wrapper a {
            position: absolute;
            bottom: 14px;
            right: 15px;
            height: 18px;
            font-size: 18px;
            color: #999;
        }

        .wrapper a:hover {
            color: #00a2d4;
        }

        .recycle {
            padding: 5px 10px;
            border: 1px solid #999;
            background: #fff;
            height: 40px;
            position: relative;
            line-height: 28px;
            vertical-align: middle;
        }

        .recycle i {
            display: table-cell;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            display: inline-block;
            background: url("../../../../static/img/recycle.svg") no-repeat center;
        }

        .recycle a {
            color: #999;
        }

        .recycle a:hover .recycleName {
            color: #179cea;
        }

        .recycle a:hover i {
            background: url("../../../../static/img/recycleHover.svg") no-repeat center;
        }

        .recycle input, .recycle label {
            position: absolute;
            top: 9px;
            left: 9px;
        }

        .recycle label {
            opacity: 1;
            border: 1px solid #999;
        }

        .recycle span {
            margin-left: 30px;
        }

        .recycle .recycleName {
            color: #333;
            display: table-cell;
            vertical-align: middle;
            margin-left: 5px;
            margin-top: 0px;
        }

        .setting {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            box-shadow: 0px 0px 4px 2px rgba(200, 200, 200, 1);
        }

        .setting li a {
            color: #7d7d7d;
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding: 0 15px;
            background: #fff;
            white-space: nowrap;
        }

        .setting li a:hover {
            color: #feffff;
            background: #ed5565;
        }

        [type="checkbox"] + label:after {
            content: '';
            display: table;
            width: 8px;
            height: 8px;
            position: absolute;
            top: 2px;
            left: 2px;
            opacity: 0;
            background: #ed5565;
            /*border: 3px solid #2C3B41;*/
            /*border-top: none;*/
            /*border-right: none;*/
            /*-webkit-transform: rotate(-45deg);*/
            /*-moz-transform: rotate(-45deg);*/
            /*-ms-transform: rotate(-45deg);*/
            /*-o-transform: rotate(-45deg);*/
            /*transform: rotate(-45deg);*/
        }

        [type="checkbox"] + label:hover:after, .indeterminate + label:after {
            opacity: 0.3;
        }

        [type="checkbox"]:checked + label:after {
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        var checkedNum = 0, index = 0;
        $(function () {
            $("#sortHead").headSort();
            settingClick();
        });

        function settingClick() {
            var $a = $("a.btn-cog"),
                $setting = $("#setting"),
                $allChecked = $("#allChecked"),
                $checked = $("ul.row input"),
                len = $checked.length;
            $a.on({
                click: function (e) {
                    e.stopPropagation();
                    var tar = $(this),
                        iptId = $("div.wrapper input"),
                        id = iptId.eq(index).attr("id");
                    index = $a.index(tar);
                    $setting.css({
                        display: "block",
                        top: e.pageY,
                        left: e.pageX
                    })
                    $("body").on({
                        "click.setting": function (e) {
                            $setting.css("display", "none");
                            $(this).off(".setting");
                        }
                    })
                }
            })
            $allChecked.on({
                change: function (e) {
                    $allChecked.removeClass("indeterminate");
                    if ($(this).prop("checked")) {
                        $checked.prop("checked", true);
                    } else {
                        $checked.prop("checked", false);
                    }
                }
            })
            $checked.on({
                change: function (e) {
                    checkedNum = 0;
                    $checked.each(function (i, ipt) {
                        if ($(ipt).prop("checked")) {
                            checkedNum++;
                        }
                    })
                    if (checkedNum === len) {
                        $allChecked.removeClass("indeterminate");
                        $allChecked.prop("checked", true);
                    } else if (checkedNum === 0) {
                        $allChecked.removeClass("indeterminate");
                    } else {
                        $allChecked.prop("checked", false);
                        $allChecked.addClass("indeterminate");
                    }
                }
            })
        }

        function confirmDelete() {
            var iptId = $("div.wrapper input"),
                id = iptId.eq(index).attr("id");
            if (confirm("<s:message code='recycleSite'/>")) {
                location.href = "updateDeleteStatus.do?ids=" + id;
            }
            <%--location.href="updateDeleteStatus.do?ids=" + id ;--%>
            <%--return confirm("<s:message code='recycleSite'/>");--%>
        }

        function confirmDelete2() {
            var iptId = $("div.wrapper input"),
                id = 0;
            iptId.each(function (i, ipt) {
                if ($(ipt).prop("checked")) {
                    id += $(ipt).attr("id") + ",";
                }
            })
            if (checkedNum == 0) {
                alert("<s:message code='pleaseSelectRecord'/>");
                return false;
            }
//  location.href="edit.do?id="+ id;
            if (confirm("<s:message code='recycleSite'/>")) {
                location.href = "updateDeleteStatus.do?ids=" + id.slice(0, -1);
            }
            ;
        }

        function optSingle(opt) {
            var iptId = $("div.wrapper input"),
                id = 0;
            iptId.each(function (i, ipt) {
                if ($(ipt).prop("checked")) {
                    id = $(ipt).attr("id")
                }
            })
            if (checkedNum == 0) {
                alert("<s:message code='pleaseSelectRecord'/>");
                return false;
            }
            if (checkedNum > 1) {
                alert("<s:message code='pleaseSelectOne'/>");
                return false;
            }
//	var id = $("input[name='ids']:checkbox:checked").val();
//	location.href=$(id).attr("href");
            console.log(id)
            location.href = "edit.do?id=" + id;
        }

        function optSingle2(opt) {
            var iptId = $("div.wrapper input"),
                id = iptId.eq(index).attr("id");
            location.href = "edit.do?id=" + id;
        }

        function optDelete(form) {
            if (Cms.checkeds("ids") == 0) {
                alert("<s:message code='pleaseSelectRecord'/>");
                return false;
            }
            if (!confirmDelete()) {
                return false;
            }
            form.action = 'delete.do';
            form.submit();
            return true;
        }
    </script>
</head>
<body class="skin-blue content-body">
<jsp:include page="/WEB-INF/views/commons/show_message.jsp"/>
<div class="content-header">
    <h1><s:message code="site.management"/> - <s:message code="list"/>
        <small>(<s:message code="totalElements" arguments="${fn:length(list)}"/>)</small>
    </h1>
</div>

<main class="container">
    <div class="header clearFix">
        <div class="btn-wrap">
            <shiro:hasPermission name="core:site:create">
                <button class="btn btn-default btn-sm" onclick="location.href='create.do?${searchstring}';">新增</button>
            </shiro:hasPermission>

            <shiro:hasPermission name="core:site:edit">
                <button class="btn btn-default btn-sm" type="button" onclick="return optSingle('#edit_opt_');">修改
                </button>
            </shiro:hasPermission>

            <shiro:hasPermission name="core:site:updateDeleteStatus">
                <button class="btn btn-default btn-sm" onclick="return confirmDelete2();">回收</button>
            </shiro:hasPermission>

            <shiro:hasPermission name="core:site:list">
                <button class="btn btn-default btn-sm" onclick="location.href='/cmscp/core/site/list.do'">刷新</button>
            </shiro:hasPermission>

        </div>
        <form class="form-inline ls-search search" action="list.do" method="get">
            <label><s:message code="site.name"/></label>
            <input class="form-control input-sm" placeholder="请输入搜索内容" type="text" name="name" value="${name}"/>
            <button class="btn btn-default btn-sm" type="submit"><s:message code="search"/></button>
        </form>
    </div>
    <div class="content">
        <ul class="row ul-row">
            <c:forEach var="bean" varStatus="status" items="${list}">
                <li class="col-lg-5ths col-md-3 col-sm-4 col-xs-6">
                    <div class="wrapper">
                        <h3><c:out value="${bean.name}"/>(${bean.id})</h3>
                        <div class="li-center"><img src="\static\img\site.png"></div>
                        <input type="checkbox" name="recycle" id="${bean.id}">
                        <label for="${bean.id}"></label>
                        <div class="li-bottom">
                            <a href="javascript:;" class="btn-cog"><i class="glyphicon glyphicon-option-horizontal"></i></a>
                        </div>
                    </div>
                </li>
            </c:forEach>
        </ul>
        <%--<div class="recycle clearFix">--%>
        <%--<div class="fl">--%>
        <%--<input type="checkbox" name="recycle"  id="allChecked">--%>
        <%--<label for="allChecked"></label>--%>
        <%--<span>全选</span>--%>
        <%--</div>--%>
        <%--<div class="fr">--%>
        <%--<a href="javascript:;" class="clearFix">--%>
        <%--<i class="fl"></i>--%>
        <%--<span class="fl recycleName">回收站</span>--%>
        <%--</a>--%>
        <%--</div>--%>
    </div>
    </div>
</main>

<div class="setting" id="setting">
    <ul>
        <shiro:hasPermission name="core:site:edit">
        <li><a href="javascript:;" onclick="return optSingle2('#edit_opt_');">修改站点信息</a></li>
        </shiro:hasPermission>
        <shiro:hasPermission name="core:site:updateDeleteStatus">
        <li><a href="javascript:;" onclick="return confirmDelete();">回收站点</a></li>
        </shiro:hasPermission>
        <%--<li><a href="javascript:;">关键词管理</a></li>--%>
        <%--<li><a href="javascript:;">关键词管理</a></li>--%>
        <%--<li><a href="javascript:;">关键词管理</a></li>--%>
        <%--<li><a href="javascript:;">关键词管理</a></li>--%>
    </ul>
</div>

</div>
</body>
</html>